<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户t</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        label {
            margin-top: 10px;
            display: block;
            font-size: 16px;
        }
        
        input {
            outline: none;
        }
        
        button {
            display: block !important;
            margin-top: 10px;
        }
    </style>
</head>
<div class="container">
    <h3>添加用户</h3>
    <form action="localhost:8000/add">
        <label for="username">用户名</label>
        <input type="text" value='请填写用户名' id='username'>
        <label for="password">密码</label>
        <input type="password" value='请输入密码' id='password'>
        <label for="age">年龄</label>
        <input type="text" value='请填写年龄' id='age'>
        <label for="email">邮箱</label>
        <input type="text" value='请填写邮箱' id='email'>
        <label>请选择爱好</label>
        <input type="checkbox" name="hobbies" id="hobbies">足球
        <input type="checkbox" name="hobbies" id="hobbies">篮球
        <input type="checkbox" name="hobbies" id="hobbies">橄榄球
        <input type="checkbox" name="hobbies" id="hobbies">敲代码
        <input type="checkbox" name="hobbies" id="hobbies">抽烟
        <input type="checkbox" name="hobbies" id="hobbies">喝酒
        <input type="checkbox" name="hobbies" id="hobbies">烫头
        <input type="submit" class="btn btn-primary margin-top" value="添加用户">

    </form>
    <script>
        var checkboxs = document.querySelectorAll('input')
        for (var i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].type != 'checkbox') {
                checkboxs[i].style.width = '100%';
            }

        }
    </script>
</div>

<body>

</body>

</html>